<template>
  <div class="tree-class">
    <div class="name">{{ t('user.table.org') }}</div>
    <n-input
      v-model:value="keyWord"
      type="text"
      style="height: 32px"
      clearable
      :placeholder="t('common.form.plInput')"
      class="tree-input"
    >
      <template #prefix>
        <n-icon :component="SearchOutline" />
      </template>
    </n-input>
    <n-scrollbar style="max-height: calc(100vh - 280px)">
      <n-tree
        ref="treeRef"
        block-line
        :data="treeData"
        :pattern="keyWord"
        label-field="label"
        key-field="orgCode"
        selectable
        :cancelable="false"
        :show-irrelevant-nodes="false"
        :selected-keys="deptIdSelect"
        :default-expand-all="defaultExpandAll"
        :on-update:selected-keys="selectedTree"
      />
    </n-scrollbar>
  </div>
</template>

<script lang="ts" setup>
  import { SearchOutline } from '@vicons/ionicons5';
  import { t } from '@/i18n';

  const treeData: any = inject('treeData');
  const deptIdSelect = ref<number[]>([]);
  const keyWord = ref('');
  const defaultExpandAll = ref<boolean>(true);
  const emit = defineEmits(['reloadTable']);
  const selectedTree = (e: number[]) => {
    emit('reloadTable', e[0]);
    deptIdSelect.value = e;
  };
  const setValue = (e) => {
    deptIdSelect.value = e;
    emit('reloadTable', deptIdSelect.value);
  };
  defineExpose({ setValue });
</script>

<style lang="less" scoped>
  .left-class {
    .name {
      font-size: 16px;
      //   margin-bottom: 10px;
    }
    .tree-input {
      margin: 10px 0;
    }
  }
</style>
